import React from 'react';
import styled from 'styled-components';
import DemoContext from './lib/demoContext'

import Counter from './pages/counter';
import RenderList from './pages/renderList';
import RenderList2 from './pages/renderList2';
import Theme from './pages/theme';
import FiveInARow from './pages/fiveInARow';
import Difftest from './pages/difftest'
import TestContext from './pages/testcontext'

function App() {
  return (
    <DemoContext.Provider value={{ riki: true }}>
      <div className="App">
        <Header>welcome</Header>
        <div>
          {/* <Counter />
        <RenderList />
        <RenderList2 />
        <Theme></Theme> */}
          {/* <FiveInARow></FiveInARow> */}
          {/* <Difftest></Difftest> */}
          <TestContext />
        </div>
      </div>
    </DemoContext.Provider>
  );
}

const Header = styled.header`
  text-align: center;
  font-size: 32px;
  line-height: 60px;
`;

export default App;
